<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>热力图</title>
    <style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    .heatImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 155px;
    }
    .housingImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 155px;
        display: none;
    }
    .clusterImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 155px;
        display: none;
    }
    </style>
    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    %{--<asset:javascript src="newMap/libs/converter.js"/>--}%
    <asset:javascript src="newMap/heatmap/heatmap.js"/>
    <asset:stylesheet href="newMap/heatmap.css"/>
</head>
<body class="fixed-navbar fixed-sidebar">
%{--<g:include view="map/Mapscript.gsp"/>--}%
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>地图</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                热力图
            </h2>
        </div>
    </div>
</div>
<g:include view="map/seachCommon.gsp"/>
<asset:javascript src="newMap/heatmap/doHeat.js"/>
<div  id="allmap" style="position: absolute;">

    <div class="heatmap" style="display: none">
        <div style="float: left;display: none">
            <div style="font-size:16px; margin-top:15px; margin-left:5px;">半径</div>
            <div style="height:32px; margin-top:5px; margin-left:5px; "><input style="width:220px;" id="radius" type="range" min="1" max="10" step="1" value="3"/></div>
        </div>
        <div style="float: right; display: none">
            <div style="font-size:16px; margin-top:15px; margin-left:5px;">模糊度</div>
            <div style="height:32px; margin-top:5px; margin-left:5px;"><input style="width:220px;" id="blur" type="range" min="1" max="20" step="1" value="5"/></div>
        </div>

    </div>

    <asset:image src="heatImg.png" class="heatImg"/>
    <asset:image src="clusterImg.png" class="clusterImg"/>
    <asset:image src="housingImg.png" class="housingImg"/>
</div>
<g:javascript>
    $(function () {
        $('#datepicker').datepicker({
            language: 'zh-CN'
        });
        $('#datepicker2').datepicker({
            language: 'zh-CN'
        });
        $("#datepicker").on("changeDate", function(event) {
            $("#my_hidden_input").val(
                    $("#datepicker").datepicker('getFormattedDate')
            )
        });

        // $('#esateTable').footable();

        $('.input-group.date').datepicker({ });
        $('.input-daterange').datepicker({ });
        var url ='/map/heatData';
        var blur = document.getElementById("blur");
        var radius = document.getElementById("radius");
        var zoneNumber = $("#city").val();
        var center = null;
        if (zoneNumber == '330100') {
            center = ol.proj.transform([120.1551500000, 30.2741500000], 'EPSG:4326', 'EPSG:3857');

        } else {
            center = heatmap.getCenter(zoneNumber);
        }
        heatmap.heatMapInits(center);
        setTimeout(function(){
            heatmap.getHeatMap({city:zoneNumber,currentMap:'heatMap'},blur,radius);
        },1000);
    });

    </g:javascript>
</body>
</html>
